import Taro, { Component } from "@tarojs/taro";
import { View, Input, Text, Image } from "@tarojs/components";
import RegisterComponent from "../../components/account/register";
import { userLogin, userRegister } from "../../actions/account";
import { connect } from "@tarojs/redux";
import apiObject from "../../service/api";
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtButton,
  AtIcon
} from "taro-ui";
import "./register.less";

@connect(
  ({ account,appconfig }) => ({
    ...account,...appconfig
  }),
  dispatch => ({
    async userLogin(params) {
      dispatch(await userLogin(params));
    },
    async userRegister(params) {
      dispatch(await userRegister(params));
    }
  })
)
class Register extends Component {
  config = {
    navigationBarTitleText: "注册登录"
  };

  state = {
    status: parseInt(this.$router.params.status),
    show: false,
    tel: "",
    imgcode: "",
    timetemp: new Date().getTime()
  };

  userLogin(params) {
    this.props.userLogin && this.props.userLogin(params);
  }

  userRegister(params) {
    this.props.userRegister && this.props.userRegister(params);
  }

  vCodeToRegister() {
    const { imgcode } = this.state;
    const { tel } = this.refs.register.state;
    if (imgcode === "") {
      Taro.showToast({
        title: "请输入图形验证码",
        icon: "none"
      });
    } else {
      this.setState({
        show: false
      });
      if (tel === "" || !/^1[3456789]\d{9}$/.test(tel)) {
        Taro.showToast({
          title: "请输入有效手机号",
          icon: "none"
        });
      } else {
        this.refs.register.refs.verifica.vCodeForLoginOrRegister();
      }
    }
  }

  render() {
    const { status } = this.state;
    const { staticUri, c_logo } = this.props;
    return (
      <View className="register-index">
        <View className="register-background">
          <View className="register-head">
            <View className="register-back-con">
            <Image
              className="register-back"
              onClick={() => {
                Taro.redirectTo({
                  url:'/pages/mine/index'
                })
              }}
              src={require("../../assets/img/back.png")}
            />
            </View>

            <Text style="font-size:18px;color:#FFFFFF;">
              {!!status ? "登录" : "注册"}
            </Text>
          </View>
        </View>
          <View className="compony-logo">
            <Image
              style="width:86px;height:86px;border-radius: 5px;"
              src={staticUri+c_logo}
            />
          </View>

        <RegisterComponent
          ref="register"
          parent={this}
          userRegister={this.userRegister.bind(this)}
          userLogin={this.userLogin.bind(this)}
        />
        <AtModal isOpened={this.state.show} closeOnClickOverlay={false} style="width:500px;">
          <AtModalHeader>图形验证码</AtModalHeader>
          <AtModalContent>
            <View className="val-con">
              <View className="validation-code">
                <Input
                  className="val-input"
                  value={this.state.imgcode}
                  onInput={e => {
                    this.setState({
                      imgcode: e.target.value
                    });
                  }}
                  placeholder={"请输入验证码"}
                />
                <Image
                  className="val-img"
                  src={apiObject.imgURL + "?a=" + this.state.timetemp}
                />
              </View>
              <View className="icon-con">
                <AtIcon
                  value="reload"
                  size="25"
                  onClick={() => {
                    this.setState({
                      timetemp: new Date().getTime()
                    });
                  }}
                />
              </View>
            </View>
            <AtButton type="primary" onClick={this.vCodeToRegister.bind(this)}>
              确定
            </AtButton>
          </AtModalContent>
        </AtModal>
      </View>
    );
  }
}
export default Register;
